<template>
	<view class="wallet">
		<view class="wallet-content">
			<view class="tab-btn">
				<!-- <button :class="{active: tabIndex == 0}" @click="tabIndex = 0">系统钱包</button> -->
				<button :class="{active: tabIndex == 1}" @click="tabIndex = 1">云钱包</button>
			</view>
			<view class="box" v-show="tabIndex == 0" @click="toWallet">
				<image src="/static/bg-004.png" mode=""></image>
				<text class="money">￥{{ walletAccount }}</text>
				<text class="desc">系统钱包</text>
			</view>
			<view class="box" v-show="tabIndex == 1" @click="toShandeWallet()">
				<image src="/static/bg-004.png" mode=""></image>
				<text class="money" style="font-size: 54rpx;">￥点击查看余额</text>
				<text class="desc">云钱包</text>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		components: {},
		data() {
			return {
				tabIndex: 1,
				walletAccount: 0,

				shandeWalletStatus: {
					status: 0,
					money: 0,
				},
			}
		},
		onShow() {
			this.getAccount();
			this.getShandeWalletStatus();
		},
		onHide() {},
		onReachBottom() {},
		onPullDownRefresh() {},
		methods: {
			getAccount() {
				this.$http('api/account/account').then(res => {
					this.walletAccount = res.account;
				})
			},
			getShandeWalletStatus() {
				this.$http('api/yun/userPaidService').then(res => {
					this.shandeWalletStatus = res;
					console.log(res);
				});
			},

			// 杉德云钱包
			toShandeWallet() {
				if (this.shandeWalletStatus.status == 0) {
					uni.showModal({
						title: '温馨提示',
						content: `尊敬的用户您好！您即将使用杉德支付云钱包，开户请支付${this.shandeWalletStatus.money}元的开户费`,
						success: (res => {
							if (res.confirm) {
								// 执行确认后的操作
								this.$http('api/yun/sandYunPay', {
									pay_type: 1,
									price: this.shandeWalletStatus.money
								}).then(res => {
									location.href = res.url;
								});
							}
						}),
					});
				} else {
					this.$http('api/yun/sandYunWallet').then(res => {
						location.href = res.url;
					});
				}
			},
			toDeving(title = '') {
				uni.navigateTo({
					url: '/pages/deving?title=' + title,
				});
			},
			toWallet() {
				uni.navigateTo({
					url: "./myWallet",
				});
			},
		}
	}
</script>
<style lang="less" scoped>
	.wallet {
		width: 100%;
		height: 100vh;
		background: #f5f5f5;
		padding: 13px;
	}

	.wallet-content {
		background: #FFFFFF;
		box-shadow: 0px 2px 4px 0px rgba(232, 232, 232, 0.5);
		border-radius: 18px;
		padding: 20px;

		.tab-btn {
			display: flex;
			justify-content: flex-start;


			button {
				box-sizing: border-box;
				width: 101px;
				height: 40px;
				background: #FFFFFF;
				border-radius: 10px;
				border: 1px solid #C6C6C6;
				font-size: 18px;
				font-weight: 500;
				color: #7B7B7B;
				margin: 0 15px 0 0;
				padding: 0;
				display: flex;
				align-items: center;
				justify-content: center;
			}

			button.active {
				color: #386EEE;
				border: 2px solid #4779F0;
			}
		}

		.box {
			margin-top: 16px;
			overflow: hidden;
			height: 188px;
			background: #386EEE;
			box-shadow: 0px 2px 4px 0px rgba(145, 145, 145, 0.5);
			border-radius: 12px;
			position: relative;

			image {
				position: absolute;
				left: 0;
				right: 0;
				width: 100%;
				height: 100%;

			}

			.money {
				height: 45px;
				font-size: 36px;
				font-weight: bold;
				color: #FFFFFF;
				line-height: 44px;
				position: absolute;
				top: 38px;
				left: 26px;
			}

			.desc {
				height: 25px;
				font-size: 18px;
				color: #D6D6D6;
				line-height: 25px;
				position: absolute;
				bottom: 25px;
				right: 23px;
			}
		}
	}
</style>
